<template>
  <div>
    <el-dialog
      title="工单详情"
      :visible="dialogTableVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-row class="header" v-if="detail.taskStatus === 1">
        <el-col :span="5" :push="1"
          ><span
            ><img
              class="icon"
              :src="require('@/icons/wait.png')"
              alt=""
            />代办</span
          ></el-col
        >
        <el-col :span="5" :push="10"
          ><span
            ><img class="img" :src="require('@/imgs/wait.png')" alt="" /></span
        ></el-col>
      </el-row>
      <el-row class="header" v-if="detail.taskStatus === 3">
        <el-col :span="5" :push="1"
          ><span
            ><img
              class="icon"
              :src="require('@/icons/cancel.png')"
              alt=""
            />取消</span
          ></el-col
        >
        <el-col :span="5" :push="10"
          ><span
            ><img
              class="img"
              :src="require('@/imgs/cancel.png')"
              alt="" /></span
        ></el-col>
      </el-row>
      <el-row class="header" v-if="detail.taskStatus === 4">
        <el-col :span="5" :push="1"
          ><span
            ><img
              class="icon"
              :src="require('@/icons/success.png')"
              alt=""
            />完成</span
          ></el-col
        >
        <el-col :span="5" :push="10"
          ><span
            ><img
              class="img"
              :src="require('@/imgs/success.png')"
              alt="" /></span
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="11" :push="1"
          ><span>设备编号：{{ detail.taskCode }}</span></el-col
        >
        <el-col :span="11" :push="1"
          ><span>创建日期：{{ detail.createTime }}</span></el-col
        >
      </el-row>
      <div class="wait" v-if="detail.taskStatus === 1">
        <el-row>
          <el-col :span="11" :push="1"
            ><span>运维人员：{{ detail.userName }}</span></el-col
          >
          <el-col :span="11" :push="1"
            ><span>工单类型：{{ detail.taskType.typeName }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col v-if="flag === 1" :span="11" :push="1"
            ><span
              >补货数量：<i class="bhxq" @click="openBuhuo">补货详情</i></span
            ></el-col
          >
          <el-col :span="11" :push="1"
            ><span
              >工单方式：{{ detail.createType === 0 ? '自动' : '手动' }}</span
            ></el-col
          >
          <el-col :span="11" :push="2"
            ><span>备注：{{ detail.desc }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24" class="btncol cancelbtn"
            ><button class="btn" @click="cancel">取消工单</button></el-col
          >
        </el-row>
      </div>
      <div class="success" v-if="detail.taskStatus === 4">
        <el-row>
          <el-col :span="11" :push="1"
            ><span>完成日期：{{ formatDate(detail.updateTime) }}</span></el-col
          >
          <el-col :span="11" :push="1"
            ><span>运营人员：{{ detail.userName }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="11" :push="1"
            ><span
              >工单类型：{{
                detail.taskType.typeName ? detail.taskType.typeName : '未知工单'
              }}</span
            ></el-col
          >
          <el-col v-if="flag === 1" :span="11" :push="1"
            ><span
              >补货数量：<i class="bhxq" @click="openBuhuo">补货详情</i></span
            ></el-col
          >
          <el-col :span="11" :push="1"
            ><span
              >工单方式：{{ detail.createType === 0 ? '自动' : '手动' }}</span
            ></el-col
          >
          <el-col :span="11" :push="2"
            ><span>备注：{{ detail.desc }}</span></el-col
          >
          <el-col :span="11" :push="2" v-if="flag !== 1"
            ><span
              >定位：<img
                class="position"
                :src="require('@/icons/position.svg')"
                alt=""
              />
              <i class="addr">{{ detail.addr }}</i></span
            ></el-col
          >
        </el-row>
      </div>
      <div class="cancel" v-if="detail.taskStatus === 3">
        <el-row>
          <el-col :span="11" :push="1"
            ><span>取消日期：{{ formatDate(detail.updateTime) }}</span></el-col
          >
          <el-col :span="11" :push="1"
            ><span>运营人员：{{ detail.userName }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="11" :push="1"
            ><span
              >工单类型：{{
                detail.taskType ? detail.taskType.typeName : '未知工单'
              }}</span
            ></el-col
          >
          <el-col v-if="flag === 1" :span="11" :push="1"
            ><span
              >补货数量：<i class="bhxq" @click="openBuhuo">补货详情</i></span
            ></el-col
          >
          <el-col :span="11" :push="1"
            ><span
              >工单方式：{{ detail.createType === 0 ? '自动' : '手动' }}</span
            ></el-col
          >
          <el-col :span="11" :push="1"
            ><span>取消原因：{{ detail.desc }}</span></el-col
          >
        </el-row>
        <el-row class="rowBtn">
          <el-col :span="24" class="btncol"
            ><button class="btn" @click="reBuild">重新创建</button></el-col
          >
        </el-row>
      </div>
    </el-dialog>
    <buhuoDetial ref="buhuo"></buhuoDetial>
  </div>
</template>

<script>
import { cancelGd, taskDetails } from '@/api/gdInfo'
import buhuoDetial from './buhuoDetial.vue'

// import enums from '@/Enums/gdStatus'
export default {
  components: {
    buhuoDetial
  },
  name: 'Dkd3DetialDialog',
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: () => ({})
    },
    flag: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },

  mounted () {
    // console.log(this.flag)
  },

  methods: {
    async openBuhuo () {
      console.log(this.detail)
      const res = await taskDetails(this.detail.taskId)
      // console.log(res)
      this.$refs.buhuo.tableData = res
      this.$refs.buhuo.flag = 1
      console.log(this.$refs.buhuo.tableData)
      this.$refs.buhuo.dialogVisible = true
    },
    // 格式化时间
    formatDate (dateTimeStr) {
      const dateTime = new Date(dateTimeStr)
      const year = dateTime.getFullYear()
      const month = (dateTime.getMonth() + 1).toString().padStart(2, '0')
      const date = dateTime.getDate().toString().padStart(2, '0')
      const hours = dateTime.getHours().toString().padStart(2, '0')
      const minutes = dateTime.getMinutes().toString().padStart(2, '0')
      const seconds = dateTime.getSeconds().toString().padStart(2, '0')

      return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
    },
    handleClose () {
      this.$emit('update:dialogTableVisible', false)
    },
    reBuild () {
      this.$emit('openAdd')
      this.handleClose()
    },
    cancel () {
      console.log(this.detail)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await cancelGd({ taskId: this.detail.taskId, desc: '' })
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.this.handleClose()
          this.$emit('cancel')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.rowBtn {
  margin-top: 40px;
}
.icon {
  transform: translate(-2px, 7px);
}
.img {
  transform: translate(10px, -20px);
}
/deep/.el-dialog {
  height: 388px;
  width: 630px;
  border-radius: 12px;
  .el-dialog__header {
    text-align: left;
  }
  .el-icon-close:before {
    content: '\e6db';
  }
  .el-col {
    text-align: left;
    height: 36px;
    line-height: 36px;
    .btn {
      cursor: pointer;
      width: 80px;
      height: 36px;
      text-align: center;
      background-color: #fbf4f0;
      border-radius: 5px;
      border: none;
    }
  }
  .header {
    display: flex;
    align-items: center;
    height: 54px;
    // line-height: 54px;
    background-color: #f8f8f8;
  }
  .btncol {
    text-align: center;
  }
}
.position {
  width: 16px;
  height: 16px;
  transform: translate(-2px, 3px);
}
.addr {
  display: block;
  padding-left: 60px;
  transform: translateY(-35px);
}
.cancelbtn {
  transform: translateY(40px);
}
.bhxq {
  color: #5f84ff;
  cursor: pointer;
}
</style>
